<template>
  <div class="process-inbound-container">
    <!-- 查询条件区域 -->
    <el-form :model="searchForm" inline label-position="right" class="search-form">
      <el-form-item label="产成品入库单号">
        <el-input v-model="searchForm.taskCode" placeholder="请输入产成品入库单号" />
      </el-form-item>
      <el-form-item label="加工单号">
        <el-input v-model="searchForm.processCode" placeholder="请输入加工单号" />
      </el-form-item>
      <el-form-item label="任务下达时间">
        <el-date-picker v-model="searchForm.startTime" type="datetime" placeholder="起始时间"
          value-format="YYYY-MM-DD HH:mm" />
        <span class="time-separator">-</span>
        <el-date-picker v-model="searchForm.endTime" type="datetime" placeholder="截至时间"
          value-format="YYYY-MM-DD HH:mm" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlePrint">打印入库单</el-button>
      </el-form-item>
    </el-form>

    <!-- 任务列表表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="serial" type="index" label="序号" width="60" />
      <el-table-column prop="taskCode" label="任务编号" />
      <el-table-column prop="createTime" label="任务下达时间" />
      <el-table-column prop="processCode" label="加工单号" />
      <el-table-column prop="warmArea" label="温区" />
      <el-table-column prop="taskNum" label="任务数量" />
      <el-table-column prop="operation" label="操作" width="80">
        <template #default="scope">
          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { queryTask } from '@/api/stockIn/processStockIn' 
import { useRouter } from 'vue-router'
// 条件查询表单数据
const searchForm = ref({
  taskCode: '',
  processCode: '',
  startTime: '',
  endTime: ''
})
// 选中的行数据
const selectedRows = ref([])
//声明打印参数
const printParams = ref([])

//声明路由组件
const router = useRouter()

// 分页相关参数
const page = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)

// 表格数据
const tableData = ref([])

// 加载状态
const loading = ref(false)

async function init() {
  try {
    // 显示加载状态
    loading.value = true
    // 使用对象扩展运算符简化参数构建
    let params = {
      a_type: 'process',
      page: page.value,
      pageSize: pageSize.value,
      processIn: { ...searchForm.value }
    }
    const res = await queryTask(params)
    console.log(params)
    if (res.code === 200) {
      tableData.value = res.data.list
      totalCount.value = res.data.total
    } else {
      console.error('获取数据失败:', res)
      // 可以在这里添加错误提示
      // ElMessage.error(`获取数据失败: ${res.msg || '未知错误'}`)
    }
  } catch (error) {
    console.error('接口请求错误:', error)
    // ElMessage.error('网络错误，请稍后重试')
  } finally {
    // 无论成功失败都关闭加载状态
    loading.value = false
  }
}

onMounted(() => {
  init()
})

// 处理多选框选择变化
function handleSelectionChange(rows) {
  selectedRows.value = rows
  console.log('当前选择的行:', selectedRows.value)
  printParams.value = rows.map(row => ({
    taskCode: row.taskCode,
    taskId: row.id
  }));
}

// 查询事件
const handleSearch = () => {
  // 可在此处理接口请求，根据 searchForm 传参获取数据更新 tableData
  console.log('查询条件：', searchForm)
  page.value = 1 // 重置到第一页
  init() // 调用接口获取数据
}

// 处理打印功能
const handlePrint = () => {
  // 打印逻辑，可结合 print-js 或 window.print()
  router.push({
    name: 'processPrint',
    query: {
      printType: 'batch',
      printData: JSON.stringify(printParams.value)
    }
  })
}

// 分页 - 每页条数变化
const handleSizeChange = newSize => {
  pageSize.value = newSize
  page.value = 1
  init()
}

// 分页 - 当前页变化
const handleCurrentChange = newPage => {
  page.value = newPage
  init()
}

// 详情操作
const handleDetail = row => {
  // 处理详情跳转或弹窗逻辑
  console.log('查看详情')
  router.push({
    name: 'processStockIn',
    query: {
      taskCode:row.taskCode,
      taskId: row.id,
    }
  })
}
</script>

<style scoped>
.process-inbound-container {
  padding: 20px;
  background: #fff;
}

.search-form {
  margin-bottom: 10px;
}

.time-separator {
  margin: 0 5px;
}
</style>